<template>
	<view class="" style="padding: 28rpx;">
	
		<view class="wrap">
			<view class="msg1 dis">
				<view class="msg-top dis msg-com" v-for="(item,index) in list" :key="index"
					:style="index!==list.length-1?'border-bottom: 2rpx solid #EDEDED':''">
					<template v-if="item.tit=='获取验证码'">
						<view class="msg-top-right">
							<input type="number" style="text-align: left;" v-model="item.msg" :maxlength='item.max'
								:placeholder="item.des" />

						</view>
						<view class="msg-top-left msg-top-leftC">
							<text class="getCode" v-if="count==60" @click="sendCode">
								获取验证码
							</text>
							<text class="getCode" v-else>{{count}}秒后重试</text>

						</view>

					</template>
					<template v-else>
						<view class="msg-top-left">{{item.tit}}</view>
						<view class="msg-top-right">
							<view class="" v-if="item.msg=='change'">

								<picker @change="bindPickerChange1" :value="index1" range-key="tit" :range="array1">
									<view class="uni-input">
										<text v-if="index1!=null">
											{{array1[index1].tit}}
										</text>
										<text v-else>请选择</text>
										<image src="@/static/index/icon_hei_you.png" mode=""></image>
									</view>
								</picker>
							</view>
							<view class="" v-else>
								<input type="number" v-model="item.msg" :maxlength='item.max' :placeholder="item.des" />

							</view>


						</view>
					</template>

				</view>

			</view>

		</view>


		<view class="xy">
			<image class="ty-img" @click="tyBtn" v-if="tyBtnIndex==false" src="@/static/index/icon_nor_ty.png"
				mode="aspectFit"></image>
			<image v-else class="ty-img" @click="tyBtn" src="@/static/index/icon_select_ty.png" mode="aspectFit">
			</image>

			<text>我已阅读并同意</text>
			<text class="name" @click="xyBtn('https://www.baidu.com')">
				《委托代扣代付授权书》
			</text>

		</view>
		<view class="btn" @click="submit">
			立即绑定
		</view>
		<uni-popup ref="popup" type="center">
			<view class="changeMoney">
				<uni-easyinput class="uni-mt-5" :focus="true" trim="all" v-model="inputMony" type="number"
					placeholder="请输入金额" @confirm="submitMony"></uni-easyinput>
				<view class="changeMoney-des">
					*请输入正确的金额数字,所输入金额不能小于最低,也不能大于最高
				</view>
				<view class="btns" @click="submitMony">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	// import getBank from '../trueName/ban/bank.js'
	// import{getBank} from '../trueName/ban/bank.js'
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import w_md5 from "@/js_sdk/zww-md5/w_md5.js"
	import {
		JSEncrypt
	} from 'jsencrypt-plus';
	import {

		sendSmsCode,

	} from "@/api/index.js";
	let inputMony = ref(null)
	const {
		proxy
	} = getCurrentInstance();
	let tyBtnIndex = ref(false);
	let count = ref(60);
	let timer = ref(null)

	let form = ref({
		hkqx: '',
		money: 30000,
		hkfs: ''
	})
	let info = ref({
		max: 3000,
		min: 100
	})
	// console.log(getBank(),'getBankgetBank')
	let list = ref([{
			tit: '所属银行',
			msg: 'change',

		},
		{
			tit: '卡号',
			des: '请输入银行卡号',
			msg: '',
			max: 20
		},
		{
			tit: '银行预留手机号',
			des: '请输入银行预留手机号',
			msg: '',
			max: 11
		},
		{
			tit: '获取验证码',
			des: '请输入验证码',
			msg: '',
			max: 4
		}
	])
	// 选择狂
	let array = ref([{
		tit: '6个月',
		id: 6
	}, {
		tit: '9个月',
		id: 9
	}, {
		tit: '12个月',
		id: 12
	}, {
		tit: '24个月',
		id: 24
	}, {
		tit: '36个月',
		id: 36
	}])


	




















	let array1 = ref([{
		tit: '中国农业银行',
		id: 1
	}, {
		tit: '中国建设银行',
		id: 2
	}, {
		tit: '中国银行',
		id: 3
	}, {
		tit: '中国人名银行',
		id: 4
	}, {
		tit: '中国招商银行',
		id: 5
	}, {
		tit: '中国工商银行',
		value: 'ICBC',
		id: 6
	}])

	// let array = ref(['中国', '美国', '巴西', '日本'])
	let index = ref(null)
	let index1 = ref(null)
	let submitMony = () => {
		const regex = /^-?\d+(\.\d{1,2})?$/;
		if (!regex.test(inputMony.value)) {
			proxy.$ts("请填写正确的金额")
			return;
		} else if (inputMony.value > info.value.max) {
			proxy.$ts("输入的金额不能大于最大金额")
			return;
		} else if (inputMony.value < info.value.min) {
			proxy.$ts("输入的金额不能小于最小金额")
			return;
		}
		form.value.money = inputMony.value
		proxy.$refs.popup.close()


		// console.log(form.value.money,'form.money')
	}
	let bindPickerChange = (e) => {
		index.value = e.detail.value
		form.value.hkqx = array.value[index.value].id

	};
	let bindPickerChange1 = (e) => {
		index1.value = e.detail.value
		form.value.hkfs = array1.value[index1.value].id

	};
	let openNum = () => {
		inputMony.value = null
		proxy.$refs.popup.open()
	}
	let tyBtn = () => {
		tyBtnIndex.value = !tyBtnIndex.value
	};
	let sendCode = async () => {
		let p = list.value[2].msg
		let regex = /^1[3-9]\d{9}$/;
		if (!regex.test(p)) {
			proxy.$ts("请输入正确的手机号码")
			return;
		}
		proxy.$ymmdBtn("ymBtnCode", {
			name: '验证码',
			phone: p
		})
		uni.showLoading({
			title: '正在发送验证码',

		});
		let timestamp1 = new Date().getTime();
		let newStr = timestamp1.toString().slice(0, -4) + timestamp1.toString().slice(-3);

		let sk = w_md5.hex_md5_32(newStr + p);
		let data = {
			"mobile": p,
			"sk": sk,
			"timestamp": timestamp1,
			"type": 1
		}
		let rrr = await sendSmsCode(data)
		if (rrr.code == 100000) {
			proxy.$ts("发送成功!")
			uni.hideLoading();
			startCountdown();
		}

	};
	let submit = () => {
		const pattern = /^\d{16,19}$/;
		const regex = /^1[3-9]\d{9}$/;
		if (index1.value == null) {

			proxy.$ts("请选择银行卡")
			return;
		} else if (!pattern.test(list.value[1].msg)) {
			proxy.$ts("请输入正确的银行卡号")
			return;
		} else if (!regex.test(list.value[2].msg)) {
			proxy.$ts("请输入正确的手机号码")
			return;
		} else if (list.value[3].msg == '') {
			proxy.$ts("请输入验证码")
			return;
		} else if (tyBtnIndex.value == false) {
			proxy.$ts("请勾选《委托代扣代付授权书》")
			return;
		}
		proxy.$ts("发送成功!")
		uni.$emit('updateData', '已绑定'); // 触发事件并传递数据
		uni.navigateBack(); // 返回页面A
		// 在当前页面（即要返回到的页面）中
		// let pages = getCurrentPages();
		// let prevPage = pages[pages.length - 2]; // 获取上一个页面的实例
		// console.log(prevPage.$vm,'prevPage.$vm')
		// prevPage.$vm.bdMsg = '已绑定'; // 修改上一个页面的数据
		// uni.navigateBack(); // 返回上一个页面
	}
	let goPages = (url) => {
		uni.navigateTo({
			url
		})
	};

	let startCountdown = () => {
		count.value -= 1;
		timer.value = setInterval(() => {
			if (count.value > 0) {
				count.value -= 1;
			} else {
				clearInterval(timer.value); // 清除定时器
				count.value = 60
			}
		}, 1000);
	};
</script>
<style lang="scss" scoped>
	.changeMoney-des {
		color: red;
		font-size: 20rpx;
		margin-top: 20rpx;

	}

	.changeMoney {
		.btns {
			width: 80%;
			margin: 0 auto;
			margin-top: 40rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			font-size: 36rpx;
			background: $mian-color;
			border-radius: 100rpx;
		}

		width: 500rpx;
		background: #fff;
		border-radius: 30rpx;
		// height: 150rpx;
		padding: 60rpx;
	}

	.wrap {
		.msg1 {
			.msg-top {
				height: 100rpx;
				line-height: 100rpx;

				.msg-top-right {
					font-weight: 400;
					font-size: 28rpx;
					color: #1B1B1E;

					input {
						font-size: 28rpx;
						text-align: right;
					}

					image {
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
					}
				}

				.msg-top-leftC {
					color: $mian-color !important;
				}

				.msg-top-left {
					font-family: PingFang SC, PingFang SC;
					font-weight: 530;
					font-size: 28rpx;
					color: #1B1B1E;
				}
			}

			.msg-com {
				justify-content: space-between;
				align-items: center;
			}

			width: 85%;
			// border: 1px solid red;
			margin: 0 auto;
			// height: 300px;
			flex-direction: column;
		}

		.msg {
			.msg-bto {
				margin-top: 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}

			.msg-center {
				align-items: center;
				padding: 20rpx 0;
				font-weight: bold;
				font-size: 60rpx;
				color: #333333;
				border-bottom: 1px solid #EDEDED;

				image {
					width: 50rpx;
					height: 50rpx;
					vertical-align: middle;
					margin-left: 20rpx;
				}
			}

			.msg-top {
				.msg-top-right {
					font-weight: 400;
					font-size: 24rpx;
					color: $mian-color;

				}

				.msg-top-left {
					font-family: PingFang SC, PingFang SC;
					font-weight: 530;
					font-size: 32rpx;
					color: #1B1B1E;
				}
			}

			.msg-com {
				justify-content: space-between;
			}

			width: 85%;
			// border: 1px solid red;
			margin: 0 auto;
			// height: 300px;
			padding: 30rpx 0;
			flex-direction: column;
		}

		background: #fff;
		border-radius: 12rpx;
		// height: 600rpx;
		// padding: 30rpx 0;
		margin-bottom:30rpx;

	}

	.btn {
		width: 80%;
		margin: 0 auto;
		margin-top: 100rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		background: $mian-color;
		border-radius: 100rpx;
	}

	.xy {
		font-weight: 400;
		margin-top: 20rpx;
		color: #D1D1D1;
		font-size: 24rpx;

		.name {
			color: $mian-color;
		}

		.ty-img {
			width: 32rpx;
			height: 32rpx;
			vertical-align: middle;
			margin-right: 10rpx;
		}
	}
</style>
<style>
	page {
		background: #F3F4F5;

		margin: 0 auto;
	}
</style>